<nz-table
  nzShowPagination
  nzShowQuickJumper
  nzShowSizeChanger
  nzTableLayout="fixed"
  [nzBordered]="true"
  [nzData]="_dataList"
  [nzFrontPagination]="false"
  [nzLoading]="tableConfig.loading"
  [nzOuterBordered]="true"
  [nzPageIndex]="tableConfig.pageIndex"
  [nzPageSize]="tableConfig.pageSize"
  [nzScroll]="tableConfig.needNoScroll ? {} : { x: '1100px' }"
  [nzShowTotal]="rangeTemplate"
  [nzSize]="tableSize"
  [nzTotal]="tableConfig!.total"
  (nzPageSizeChange)="onPageSizeChange($event)"
  (nzQueryParams)="onQueryParamsChange($event)"
>
  <ng-template #rangeTemplate let-range="range" let-total>{{ range[0] }}-{{ range[1] }} 共 {{ total }} 条</ng-template>
  <thead>
    <tr>
      @if (tableConfig.showCheckbox) {
        <th class="animate-bg-0" [nzChecked]="allChecked" [nzIndeterminate]="indeterminate" [nzLeft]="true" [nzWidth]="'40px'" (nzCheckedChange)="onAllChecked($event)"></th>
      }
      @for (head of tableConfig.headers; track head; let headIndex = $index; let last = $last; let first = $first) {
        @if (head.show === undefined || head.show === true) {
          <th
            class="animate-bg-0"
            nz-resizable
            nzBounds="parent"
            nzPreview
            [nzLeft]="!!head.fixed && head.fixedDir === 'left'"
            [nzMaxWidth]="1200"
            [nzMinWidth]="1"
            [nzRight]="!!head.fixed && head.fixedDir === 'right'"
            [nzWidth]="head.width + 'px'"
            (nzResizeEnd)="onResize($event, head.title)"
          >
            @if (!last && (tableConfig.showCheckbox ? true : !last)) {
              <nz-resize-handle nzDirection="right">
                <div class="resize-trigger"></div>
              </nz-resize-handle>
            }
            {{ head.title }}
            @if (head.showSort) {
              <div class="sort-wrap m-l-8 hand-model" (click)="changeSort(head)">
                <i class="sort-caret ascending" [class.sort-caret-sel-asc]="head.sortDir === 'asc'"></i>
                <i class="sort-caret descending" [class.sort-caret-sel-desc]="head.sortDir === 'desc'"></i>
              </div>
            }
          </th>
        }
      }
    </tr>
  </thead>
  <tbody>
    @for (data of _dataList; track data) {
      @for (item of mapOfExpandedData[data.id]; track item; let rowIndex = $index) {
        @if ((item.parent && item.parent.expand) || !item.parent) {
          <tr>
            @if (tableConfig.showCheckbox) {
              <td
                class="animate-bg-0"
                nzEllipsis
                [nzChecked]="item['_checked']"
                [nzIndeterminate]="item['indeterminate']"
                [nzLeft]="true"
                (nzCheckedChange)="checkRowSingle($event, rowIndex, item)"
              ></td>
            }
            @for (head of tableConfig.headers; track head; let headIndex = $index; let last = $last; let first = $first) {
              @if (head.show === undefined || head.show === true) {
                <td
                  [ngClass]="head.tdClassList ? head.tdClassList : ''"
                  [nzEllipsis]="!head.notNeedEllipsis"
                  [nzIndentSize]="first ? item.level! * 20 : 0"
                  [nzLeft]="!!head.fixed && head.fixedDir === 'left'"
                  [nzRight]="!!head.fixed && head.fixedDir === 'right'"
                  [nzShowExpand]="first ? !!item.children : false"
                  [(nzExpand)]="item.expand"
                  (nzExpandChange)="collapse(mapOfExpandedData[data.id], item, $event)"
                >
                  @if (head.tdTemplate) {
                    <ng-container *ngTemplateOutlet="head.tdTemplate; context: item"></ng-container>
                  } @else {
                    @if (head.pipe) {
                      <span [title]="item | tableFiledPipe: head.field | map: head.pipe">{{ item | tableFiledPipe: head.field | map: head.pipe }}</span>
                    } @else {
                      <ng-container>
                        <span [title]="item | tableFiledPipe: head.field">{{ item | tableFiledPipe: head.field }}</span>
                      </ng-container>
                    }
                  }
                </td>
              }
            }
          </tr>
        }
      }
    }
  </tbody>
</nz-table>
